import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../../res/myColors.dart';

/// 图片预览组件 上下翻屏翻页
class ImagePreviewFullscreen extends StatelessWidget {
  final List<String> imageUrls;

  const ImagePreviewFullscreen({super.key, required this.imageUrls});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height+500,
      color: myColors.red,
      child: Stack(
        children: [
          // 垂直滑动的全屏图片
          PageView.builder(
            scrollDirection: Axis.vertical,
            itemCount: imageUrls.length,
            itemBuilder: (context, index) {
              return SizedBox.expand(
                child: Image.network(
                  imageUrls[index],
                  fit: BoxFit.cover,
                  loadingBuilder: (ctx, child, progress) {
                    if (progress == null) return child;
                    return const Center(child: CircularProgressIndicator());
                  },
                  errorBuilder: (ctx, error, stackTrace) {
                    return const Center(child: Text('加载失败', style: TextStyle(color: Colors.white)));
                  },
                ),
              );
            },
          ),

          // 右上角关闭按钮
          Positioned(
            top: 40,
            right: 20,
            child: GestureDetector(
              onTap: () => Navigator.of(context).pop(),
              child: const Icon(Icons.close, color: Colors.white, size: 30),
            ),
          ),
        ],
      ),
    );
  }
}